Một blog hoặc một website bình thường lúc nào cũng sẽ có ba trang đó là
About (Giới thiệu), Privacy Policy (Chính sách bảo mật), và Contact
(Liên hệ). Một website mà có 3 trang này thì thông thường sẽ được tin
tưởng và sử dụng bởi nhiều người dùng hơn. Đối với Blogger thì hai loại
trang About, và Privacy Policy thì hoàn toàn có thể tạo ra đơn giản chỉ
như việc viết bài mới và căn chỉnh bố trí bài đó. Thế làm sao chúng ta
tạo ra được trang liên hệ cho Blogger? Để giải đáp thắc mắc này, mình
viết ra bài viết này để hướng dẫn mọi người về cách tạo ra một trang
liên hệ riêng cho mình.
Hướng dẫn tạo trang liên hệ cho Blogger
Thủ thuật mà mình hướng dẫn ở đây là chính lợi dụng widget có sẵn của
Blogger cướp về trang tĩnh để xài. Nói thế bạn cũng hiểu, đầu tiên để
lợi dụng thì chúng ta phải tạo ra nó.
Đăng nhập vào
Blogger » Bố cục » Thêm tiện ích
Tại của số của thêm tiện ích, các bạn ngó qua khu vực menu phía bên trái, chọn vào tab
Tiện ích Khác. Sau khi chọn vào tab đó bạn sẽ thấy tiện ích
Biểu mẫu liên hệ, chọn và thêm nó vào blog của bạn.
Bước tiếp theo, chúng ta sẽ làm ẩn đi tiên ích Biểu mẫu liên hệ đó, và
lợi dụng những chức năng có sẵn của nó để viết ra một khung liên hệ khác
tại trang mới mà chúng ta tạo tại Blogger.
Các bạn vào lại trang
tổng quan của blog của bạn
» Mẫu » Chỉnh sửa HTML
Tìm đến thẻ
]]></b:skin> và thêm đoạn css sau lên trên
.ContactForm {
display: none;
}
Bước kế tiếp, chúng ta sẽ tạo một trang liên hệ bằng trang tĩnh tại blog của chúng ta. Tại trang tổng quan bạn chọn vào
Trang » Trang mới. Tại phần nội dung của trang mới, bạn chuyển sang soạn thảo bằng HTML và thêm đoạn mã này vào
<div class="contact-form-widget">
<div class="form">
<form name="contact-form">
Họ Tên của bạn
<input class="contact-form-name" id="ContactForm1_contact-form-name" name="name" size="30" type="text" value="" />
E-mail *
<input class="contact-form-email" id="ContactForm1_contact-form-email" name="email" size="30" type="text" value="" />
Lời nhắn *
<textarea class="contact-form-email-message" cols="25" id="ContactForm1_contact-form-email-message" name="email-message" rows="5"></textarea>
<input class="contact-form-button contact-form-button-submit" id="ContactForm1_contact-form-submit" type="button" value="Submit" />
<div class="contact-form-error-message" id="ContactForm1_contact-form-error-message">
</div>
<div class="contact-form-success-message" id="ContactForm1_contact-form-success-message">
</div>
</form>
</div>
</div>
qua bước này bạn đã có cho mình trang liên hệ riêng của mình, nhưng
tương đối là không đẹp, vì chưa có trang trí gì cho nó cả. Bạn hoàn toàn
có thể trang trí lại nó bằng CSS cho nó. v.d. bạn có thể sử dụng đoạn
css giống như của mình ở đây.
Các bạn vào lại
Mẫu » Chỉnh sửa HTML tìm đến thẻ
]]></b:skin> và thêm đoạn css sau lên trên
/* Contact Form Container */
.contact-form-widget {
width: 600px;
max-width: 90%;
margin: 0 auto;
padding: 10px;
background: #F8F8F8;
color: #000;
border: 1px solid #C1C1C1;
box-shadow: 0 1px 4px rgba(0, 0, 0, 0.25);
}
/* Fields and submit button */
.contact-form-name, .contact-form-email, .contact-form-email-message {
width: 100%;
max-width: 100%;
margin-bottom: 10px;
}
/* Submit button style */
.contact-form-button-submit {
border-color: #C1C1C1;
background: #E3E3E3;
color: #585858;
width: 20%;
max-width: 20%;
margin-bottom: 10px;
}
/* Submit button on mouseover */
.contact-form-button-submit:hover{
background: #4C8EF9;
color: #ffffff;
border: 1px solid #FAFAFA;
}
Cuối cùng
lưu lại template của bạn và xem thử kết quả.
Lời kết
Tất cả mọi website bao gồm cả blog đều nên có một trang Liên hệ, việc
thêm trang liên hệ vào blog của chúng ta giúp chúng ta giao tiếp được
đến người dùng nhiều hơn, và tăng thêm được độ uy tín tại blog của chúng
ta.
P/S: Hôm nay viết hướng dẫn bài này mới biết trang quản trị Trang trong
Blogger Dashboard mới thay đổi bữa nào không biết, dễ hơn cho việc quản
lý!
Home
